<template>
  <div class="chatWrap">
    <ChatList
      class="chatListBar"
      @click="selectChatItem"
    />
    <ChatDetail class="chatDetailBar" :chatDetail="chatDetail" />
  </div>
</template>

<script type='text/ecmascript-6'>
import ChatList from "./ChatList.vue";
import ChatDetail from "./ChatDetail.vue";
export default {
  components: {
    ChatList,
    ChatDetail
  },
  data() {
    return {
      chatDetail: {}
    };
  },
  mounted() {
  },
  methods: {
    selectChatItem(item) {
      this.chatDetail = item;
      this.$store.commit('store_currentChatUser', item);
      const name = this.$route.name;
      this.$router.push({ name: name, query: { chatCode: item.chatCode } });
    }
  }
};
</script>

<style lang='scss' scoped>
.chatWrap {
  height: 100%;
  display: flex;
  .chatListBar {
    width: 250px;
    height: 100%;
    flex-shrink: 0;
  }
  .chatDetailBar {
    flex: 1;
  }
}
</style>